﻿<Divider Orientation="left">Div</Divider>
<Space Direction="@DirectionVHType.Vertical" Style="width: 100%">
	<SpaceItem>
		<Space Size=@(("8", "16")) Wrap>
			<SpaceItem>
                <DropdownButton OnClick='e => { Console.WriteLine("Click on left button."); }'>
                    <Overlay>
                        @_overlayMenu
                    </Overlay>
                    <ChildContent>
                        Dropdown
                    </ChildContent>
                </DropdownButton>
			</SpaceItem>
			<SpaceItem>
                <DropdownButton Icon="user" Type="@((ButtonType.Dashed, ButtonType.Dashed))">
                    <Overlay>        
                        @_overlayMenu
                    </Overlay>    
                    <ChildContent>
                        Dropdown
                    </ChildContent>
                </DropdownButton>
			</SpaceItem>
			<SpaceItem>
                <DropdownButton OnClick='e => { Console.WriteLine("Click on left button."); }' Type="@((ButtonType.Primary, ButtonType.Default))">
                    <Overlay>
                        @_overlayMenu
                    </Overlay>
                    <ChildContent>
                        Primary
                    </ChildContent>
                </DropdownButton>
			</SpaceItem>
			<SpaceItem>
                <DropdownButton OnClick='e => { Console.WriteLine("Click on left button."); }' Danger>
                    <Overlay>
                        @_overlayMenu
                    </Overlay>
                    <ChildContent>
                        Danger
                    </ChildContent>
                </DropdownButton>
			</SpaceItem>
			<SpaceItem Class="site-button-ghost-wrapper">
                <DropdownButton OnClick='e => { Console.WriteLine("Click on left button."); }' Ghost>
                    <Overlay>
                        @_overlayMenu
                    </Overlay>
                    <ChildContent>
                        Ghost
                    </ChildContent>
                </DropdownButton>
			</SpaceItem>
			<SpaceItem>
                <DropdownButton OnClick='e => { Console.WriteLine("Click on left button."); }' Disabled>
                    <Overlay>
                        @_overlayMenu
                    </Overlay>
                    <ChildContent>
                        Dropdown
                    </ChildContent>
                </DropdownButton>
			</SpaceItem>
			<SpaceItem>
                <DropdownButton ButtonsRender="ButtonsRender" Loading>
                    <Overlay>
                        @_overlayMenu
                    </Overlay>
                    <ChildContent>
                        <Tooltip Title="@("tooltip")">
                            <Unbound>
                                <span @ref="@context.Current">With ToolTip</span>
                            </Unbound>
                        </Tooltip>
                    </ChildContent>
                </DropdownButton>    
			</SpaceItem>
			<SpaceItem>
                <Dropdown Trigger="@(new Trigger[] { Trigger.Click })" OnClick='e => { Console.WriteLine("Dropdown button clicked."); }'>
                    <Overlay>
                        @_overlayMenu
                    </Overlay>
                    <ChildContent>
                        <Button>Button <Icon Type="down" /></Button>
                    </ChildContent>
                </Dropdown>
		</SpaceItem>
		</Space>
	</SpaceItem>
</Space>
<Divider Orientation="left">Unbound</Divider>
<Space Direction="@DirectionVHType.Vertical" Style="width: 100%">
	<SpaceItem>
		<Space Size=@(("8", "16")) Wrap>
			<SpaceItem>
                <DropdownButton ButtonsStyle="@("background-color: #91d5ff;")" OnClick='e => { Console.WriteLine("Click on left button."); }'>
                    <Overlay>
                        @_overlayMenu
                    </Overlay>
                    <Unbound>
                        Dropdown
                    </Unbound>
                </DropdownButton>
			</SpaceItem>
			<SpaceItem>
                <DropdownButton Icon="user" ButtonsStyle="@(("background-color:#91d5ff;", "background-color: #fff0f6;"))">
                    <Overlay>        
                        @_overlayMenu
                    </Overlay>    
                    <Unbound>
                        Dropdown
                    </Unbound>
                </DropdownButton>
			</SpaceItem>
			<SpaceItem>
                <DropdownButton OnClick='e => { Console.WriteLine("Click on left button."); }' Disabled>
                    <Overlay>
                        @_overlayMenu
                    </Overlay>
                    <Unbound>
                        Dropdown
                    </Unbound>
                </DropdownButton>
			</SpaceItem>
			<SpaceItem>
                <DropdownButton ButtonsRender="ButtonsRender" Loading ButtonsClass="@("demo-dropdown-button1")">
                    <Overlay>
                        @_overlayMenu
                    </Overlay>
                    <Unbound>
                        <Tooltip Title="@("tooltip")">
                            <Unbound Context="tooltip">
                                <span @ref="@tooltip.Current">With ToolTip</span>
                            </Unbound>
                        </Tooltip>
                    </Unbound>
                </DropdownButton>    
			</SpaceItem>
			<SpaceItem>
                <DropdownButton ButtonsRender="ButtonsRender" ButtonsClass="@(("demo-dropdown-button1", "demo-dropdown-button2"))">
                    <Overlay>
                        @_overlayMenu
                    </Overlay>
                    <Unbound>
                        <Tooltip Title="@("tooltip")">
                            <Unbound Context="tooltip">
                                <span @ref="@tooltip.Current">ButtonsRender</span>
                            </Unbound>
                        </Tooltip>
                    </Unbound>
                </DropdownButton>    
			</SpaceItem>
			<SpaceItem>
                <Dropdown Trigger="@(new Trigger[] { Trigger.Click })" OnClick='e => { Console.WriteLine("Dropdown button clicked."); }'>
                    <Overlay>
                        @_overlayMenu
                    </Overlay>
                    <Unbound>
                        <Button RefBack=@context>Button <Icon Type="down" /></Button>
                    </Unbound>
                </Dropdown>
		</SpaceItem>
		</Space>
	</SpaceItem>
</Space>
<style>
    .site-button-ghost-wrapper {
        background: rgb(190, 200, 200);
        padding: 26px 16px 16px;
    }

	.demo-dropdown-button1, .demo-dropdown-button1:hover {
		background: #f6ffed;
	}
	
	.demo-dropdown-button2, .demo-dropdown-button2:hover {
		background: #b7eb8f;
	}
</style>
@code
{
private RenderFragment _overlayMenu =@<Menu>
    <MenuItem>
        <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
            1st menu item
        </a>
    </MenuItem>
    <MenuItem>
        <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
            2nd menu item
        </a>
    </MenuItem>
    <MenuItem>
        <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
            3rd menu item
        </a>
    </MenuItem>
</Menu>; 

private RenderFragment ButtonsRender(RenderFragment leftButton, RenderFragment rightButton)
{
return @<Template>
    <span>@leftButton</span>
    @rightButton
</Template>;
}


}